<template>
  <div class="popover-container">
    <el-popover
      v-model="isShow"
      placement="bottom"
      min-width="500"
      trigger="manual"
    >
      <ul>
        <li v-for="item in resultList" :key="item.lineId">
          <el-checkbox
            v-model="item.lineCheck"
            :label="item.lineName"
            @change="checkOne(item)"
          >
            {{ item.lineName }}
          </el-checkbox>
        </li>
      </ul>
      <li v-show="hasNoData" class="search-item border-bottom">
        无匹配数据
      </li>
      <div slot="reference" class="trigger-area">
        <label style="with:80px;">自定义赠品名称：</label>
        <el-input v-model="keyword" clearable class="input-search" placeholder="请输入内容" @keyup.enter.native="handlerSearch" @clear="inputClear" />
      </div>
    </el-popover>

    <el-tag v-for="item in checkedList" :key="item.lineId" closable color="#3b425d" :disable-transitions="false" @close="handleClose(item)">
      {{ item.lineName }}
    </el-tag>

    <div class="twoBtn">
      <button class="submitBtn1 btnStyle" @click="save">保存</button>
      <button class="submitBtn1 btnStyle" @click="handleCloseDialog">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Searchadd',
  props: {
    resultList: {
      type: Array,
      default() {
        return []
      }
    },
    disabledBool: {
      type: Boolean,
      default: true
    }
  },
  data: function() {
    return {
      keyword: '', // 文本框的值
      timer: null,
      // resultList: [], // 结果数据
      checkedList: [], // 选中的数据
      // 下拉列表是否显示
      isShow: false
    }
  },
  computed: {
    hasNoData() {
      return !this.resultList.length
    }
  },

  mounted: function() {
    this.keyword = ''
    var _this = this
    // 点击页面空白处隐藏下拉列表
    document.addEventListener('click', function() {
      _this.isShow = false
      _this.$emit('clearReslutList', '')
    })
  },
  methods: {
    handlerSearch() {
      var _search = this.keyword
      if (!_search) {
        this.resultList = []
        this.isShow = false
        return
      }
      this.$emit('requestReslutList', _search)
      if (this.resultList.length >= 0) {
        this.isShow = true
      }
    },
    // 选择单个
    checkOne: function(item) {
      this.resultList.every(function(item) {
        return item.lineCheck === true
      })
      this.getCheckData()
    },
    // 获取选中的数据
    getCheckData: function() {
      const list = [...this.checkedList]
      this.checkedList = this.resultList.filter(function(item) {
        return item.lineCheck === true
      })
      if (list.length > 0) {
        this.checkedList.map((items, indexs) => {
          const negativeNum = list.find((item, index) => {
            return items.lineId == item.lineId
          })
          if (!negativeNum) list.push(items)
        })
        this.checkedList = [...list]
      }
    },
    handleClose(tagItem) {
      this.checkedList.splice(this.checkedList.indexOf(tagItem), 1)
      this.resultList.map(function(item) {
        if (item === tagItem) {
          item.lineCheck = false
        }
      })
    },
    inputClear() {
      this.$emit('clearReslutList', '')
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog', false)
    },
    save() {
      this.$emit('saveBabyData', this.checkedList)
    }
  }
}
</script>

<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
.popover-container{
  width: 300px;
  .twoBtn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    position: absolute;
    bottom: 30px;
    .btnStyle{
      width: 148px;
      height: 44px;
      background: #e7ecf8;
      border: 1px solid #3b425d;
      border-radius: 8px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #3b425d;
    }
    .btnStyle:hover{
      background: $mainColor;
      color: #fff;
    }
    .submitBtn1{
      display: inline-block;
      cursor: pointer;
    }
    .submitBtn1:nth-of-type(2){
        margin-left: 64px;
    }
  }
}
.trigger-area{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 350px;
  margin-bottom: 30px;
}
.input-search{
  width: 200px
}
ul {
  list-style-type:none;
  margin:0;
  padding:0;
  li{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 200px;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-tag {
  color: #ffffff;
  ::v-deep .el-tag__close {
    color: #ffffff;
  }
}
::v-deep .el-icon-close:hover {
  color: $mainColor;
  background: #ffffff;
}
::v-deep .el-input__inner:focus {
  border-color: $mainColor;
}

</style>

